<div class="tab-content-pad scroll-full">
    <div class="reagent-search-tab">
        <div class="panel panel-info">
            <div class="panel-heading" i-translate="SEARCH"></div>
            <div class="panel-body">
                <div class="main-search-block">
                    <div class="row">
                        <div class="col-xs-9">
                            <form ng-submit="vm.search()">
                                <simple-input>
                                    <span i-translate="TYPE_IN_YOUR_SEARCH_QUERY"></span>
                                    <input class="form-control"
                                           ng-model="vm.state.restrictions.searchQuery">
                                </simple-input>
                            </form>
                        </div>
                        <div class="col-xs-3">
                            <a class="link-advanced-search" ng-click="vm.state.$$isCollapsed = !vm.state.$$isCollapsed">
                                <span i-translate="ADVANCED_SEARCH"></span>
                                <span ng-class="{'glyphicon glyphicon-chevron-down':vm.state.$$isCollapsed,
                                                 'glyphicon glyphicon-chevron-up':!vm.state.$$isCollapsed}"></span>
                            </a>
                        </div>
                    </div>
                    <div class="search-hint"></div>
                </div>
                <div uib-collapse="vm.state.$$isCollapsed" class="collapse-content">
                        <div class="criteria-search-block">
                            <h5><span i-translate="FIELD_SEARCH_CRITERIA"></span>:</h5>

                            <div class="row"
                                 ng-repeat="(key, searchCriteria) in vm.state.restrictions.advancedSearch">
                                <div ng-if="!searchCriteria.$$skipList">
                                    <div class="col-xs-3">
                                        <label class="control-label"
                                               ng-bind="::searchCriteria.name"></label>
                                    </div>
                                    <div class="col-xs-3"
                                         ng-if="searchCriteria.$$conditionList && searchCriteria.$$conditionList.length">
                                        <autocomplete items="searchCriteria.$$conditionList"
                                                      model="searchCriteria.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete ng-if="searchCriteria.isSelect"
                                                      clear-item="vm.clearItem"
                                                      allow-clear="true"
                                                      el-name="searchCriteria.field"
                                                      items="searchCriteria.searchConditions"
                                                      model="searchCriteria.selectedValue">
                                        </autocomplete>

                                        <simple-input ng-if="!searchCriteria.isSelect">
                                            <input class="form-control"
                                                   type="{{ searchCriteria.type }}"
                                                   ng-model="searchCriteria.value">
                                        </simple-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="criteria-search-block">
                            <h5><span i-translate="ENTITY_TYPE_CRITERIA"></span>:</h5>

                            <div class="row">
                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedEntitiesFlags['Project']"
                                                     indigo-change="vm.selectEntity('Project')"
                                                     indigo-label="Project"></indigo-checkbox>
                                </div>
                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedEntitiesFlags['Notebook']"
                                                     indigo-change="vm.selectEntity('Notebook')"
                                                     indigo-label="Notebook"></indigo-checkbox>

                                </div>
                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedEntitiesFlags['Experiment']"
                                                     indigo-change="vm.selectEntity('Experiment')"
                                                     indigo-label="Experiment"></indigo-checkbox>

                                </div>
                            </div>
                        </div>
                        <div class="criteria-search-block">
                            <h5><span i-translate="ENTITY_SEARCHING_DOMAIN"></span>:</h5>

                            <div class="row m-b15">
                                <div class="col-xs-2">
                                    <label class="radio-inline">
                                        <input checked="checked" name="domain" type="radio" value="OWN_ENTITY"
                                               ng-change="vm.changeDomain()" ng-model="vm.state.domainModel">
                                        <span class="search-panel__line-height" i-translate="IN_MY_OWN_ENTITY"></span>
                                    </label>
                                </div>
                                <div class="col-xs-10">
                                    <label class="radio-inline">
                                        <input name="domain" type="radio" value="USERS_ENTITIES"
                                               ng-change="vm.changeDomain()" ng-model="vm.state.domainModel">
                                        <span class="search-panel__line-height"
                                              i-translate="IN_ENTITIES_OF_THESE_USERS"></span>
                                    </label>
                                </div>
                            </div>
                            <autocomplete class="m-b20"
                                          items="vm.users"
                                          on-select="vm.selectedUsersChange()"
                                          own-entity-selected="vm.ownEntitySelected"
                                          on-remove="vm.selectedUsersChange()"
                                          model="vm.state.selectedUsers"
                                          is-multiple="true">
                            </autocomplete>
                        </div>
                        <div class="criteria-search-block">
                            <h5><span i-translate="EXPERIMENT_STATUS_CRITERIA"></span>:</h5>

                            <div class="row">

                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.OPEN"
                                                     indigo-change="vm.selectItem('OPEN')"
                                                     indigo-label="Open"></indigo-checkbox>

                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.SINGING"
                                                     indigo-change="vm.selectItem('SINGING')"
                                                     indigo-label="Signing"></indigo-checkbox>

                                </div>
                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.COMPLETED"
                                                     indigo-change="vm.selectItem('COMPLETED')"
                                                     indigo-label="Completed"></indigo-checkbox>

                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.SUBMIT_FAIL"
                                                     indigo-change="vm.selectItem('SUBMIT_FAIL')"
                                                     indigo-label="Submit Fail"></indigo-checkbox>

                                </div>
                                <div class="col-xs-2">
                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.SUBMITTED"
                                                     indigo-change="vm.selectItem('SUBMITTED')"
                                                     indigo-label="Submitted"></indigo-checkbox>

                                    <indigo-checkbox indigo-model="vm.state.selectedItemsFlags.ARCHIVED"
                                                     indigo-change="vm.selectItem('ARCHIVED')"
                                                     indigo-label="Archived"></indigo-checkbox>

                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <form class="panel panel-info">
            <div class="panel-heading" i-translate="STRUCTURE_REACTION_SEARCH_QUERY"></div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-2">
                        <label class="control-label" i-translate="SEARCH"></label>
                    </div>
                    <div class="col-xs-4">
                        <autocomplete items="vm.structureTypes"
                                      model="vm.state.restrictions.structure.type">
                        </autocomplete>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2">
                        <label class="control-label" i-translate="SIMILARITY_CRITERIA"></label>
                    </div>
                    <div class="col-xs-4">
                        <autocomplete items="vm.conditionSimilarity"
                                      model="vm.state.restrictions.structure.similarityCriteria">
                        </autocomplete>
                    </div>
                    <div ng-if="vm.state.restrictions.structure.similarityCriteria.name == 'similarity'">
                        <simple-input class="col-xs-1"
                                      validation-pattern-text="Enter 1-100">
                            <input class="form-control"
                                   name="similarityValue"
                                   ng-pattern="/^\d{1,2}(?!\d)|100$/"
                                   required
                                   maxlength="3"
                                   ng-model="vm.state.restrictions.structure.similarityValue">
                        </simple-input>
                        <div class="relative">
                            <span class="absolute top-7">%</span>
                        </div>
                    </div>
                </div>
                <div class="m-t5">
                    <indigo-structure-scheme class="search-structure-scheme"
                                             ss-structure-type="molecule"
                                             ss-title="'Structure or reaction'"
                                             ss-model="vm.state.restrictions.structure"
                                             model-trigger="vm.clearStructureTrigger"
                                             ss-autosave="false"
                                             model-trigger="vm.selectedBatchTrigger"
                                             on-changed="vm.onChangeModel(structure)"
                                             ng-if="vm.state.restrictions.structure.type.name == 'Product'">
                    </indigo-structure-scheme>
                    <indigo-structure-scheme class="search-structure-scheme"
                                             ss-structure-type="reaction"
                                             ss-title="'Structure or reaction'"
                                             ss-model="vm.state.restrictions.structure"
                                             model-trigger="vm.clearStructureTrigger"
                                             on-changed="vm.onChangeModel(structure)"
                                             ss-autosave="false"
                                             ng-if="vm.state.restrictions.structure.type.name == 'Reaction'">
                    </indigo-structure-scheme>
                </div>
            </div>
        </form>
        <div class="btn-bottom-block">
            <button class="btn btn-primary btn-can-loading {{(vm.loading) ? 'btn-loading' : ''}}" type="button"
                    ng-click="vm.search()"
                    ng-disabled="!vm.state.restrictions.structure.image && !vm.isAdvancedSearchFilled() &&
                    !vm.state.restrictions.searchQuery" i-translate="SEARCH">
            </button>
            <button class="btn btn-secondary" type="button" ng-click="vm.clear()" i-translate="CLEAR"></button>
        </div>
        <table class="main-table table table-striped table-condensed dash-table">
            <thead class="main-table__header">
            <th i-translate="ENTITY_TYPE"></th>
            <th i-translate="ENTITY_NAME_ID"></th>
            <th i-translate="CREATION_DATE"></th>
            <th i-translate="AUTHOR"></th>
            <th i-translate="SUBJECT_TITLE"></th>
            <th i-translate="ACTIONS"></th>
            </thead>
            <tbody class="main-table__body">
            <tr class="table-list" ng-repeat="entity in vm.state.searchResultsPaged track by $index">
                <td class="table-list__item dash-exp-id" ng-bind="entity.kind"></td>
                <td class="table-list__item dash-exp-id" ng-bind="entity.name"><a ng-click="vm.goTo(entity)"></a></td>
                <td class="table-list__item dash-exp-id"
                    ng-bind="entity.details.creationDate  | date:'MMM dd yyyy'"></td>
                <td class="table-list__item dash-exp-id" ng-bind="entity.details.author"></td>
                <td class="table-list__item dash-exp-id" ng-bind="entity.details.title"></td>
                <td class="table-list__item dash-exp-id">
                    <a class="search-action" ng-click="vm.goTo(entity)" i-translate="OPEN"></a>
                    <a class="search-action" ng-click="vm.printEntity(entity)" i-translate="PRINT"></a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="text-center" ng-if="vm.state.searchResults.length > vm.state.searchResultsPaged.length">
            <div uib-pagination
                 class="pagination-sm"
                 total-items="vm.state.searchResults.length"
                 items-per-page="vm.state.itemsPerPage"
                 ng-model="vm.state.page"
                 ng-change="vm.doPage()">
            </div>
        </div>
        <div class="text-center" ng-if="!vm.state.searchResults.length">
            <div  i-translate="NO_DATA_FOUND"></div>
        </div>
    </div>
</div>
